<template>
	<div class="sk-detail">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				限时抢购
			</div>
		</div>
		<div class="no-place"></div>
		<div class="skd-content">
			<div class="sc-header">
				<h1>精选好货限时秒杀</h1>
				<div class="sch-content">
					<p class="time">{{time}}开始</p>
					<p class="statu" v-if="data.grab_type == 1"><span></span>即将开抢<span></span></p>
					<p class="statu" v-if="data.grab_type == 2"><span></span>已抢完<span></span></p>
					<p class="statu" v-if="data.grab_type == 3"><span></span>已开抢<span></span></p>
					<p class="title">{{data.itemshorttitle}}</p>
				</div>
			</div>
			<div class="skd-video">
				<video-player  class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    v-if="url"
			    >
			    </video-player>
			    <video-player  class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions1"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    v-if="mainurl"
			    >
			    </video-player>
			</div>
			<div class="skd-title">
				<p>{{data.itemdesc}}</p>
				<img :src="data.itempic" />
			</div>
			<div class="skd-photo">
				<h2>称心如意·验货实拍</h2>
				<div class="skdp-item"
					v-for="(item, index) in conList"
				>
					<div class="ski-des">
	                    <span v-html="unescape(item.text)"></span>
	                </div>
	                <img class="ski-img" :src="'http://img.haodanku.com/'+item.img">
				</div>
			</div>
		</div>
		<div class="station"></div>
		<div class="skd-footer">
			<div class="skf-left">
				<p><span>￥</span>{{data.itemendprice}}</p>
				<span>原价{{data.itemprice}}元</span>
			</div>
			<div class="skf-btn">
				<p @click="share()">商品分享</p>
				<p @click="showDia()">领券购买</p>
			</div>
		</div>
		<div class="dialog"
			v-if="diaShow"
			@click="diaShow = false"
		>
			<div class="dia-content"
				@click.stop="diaShow=true"
			>
				<div class="dc-header">
					淘口令购买
				</div>
				<div class="dc-text">
					{{data.itemshorttitle}}<br/>
					原价：{{data.itemprice || 0}}元<br/>
					优惠券：{{data.couponmoney || 0}}元<br/>
					券后价：{{data.itemendprice || 0}}元<br/>
					-----------------<br/>
					复制这条信息打开【手机淘宝】领券下单{{PWD}}<br/>
				</div>
				<div class="dc-btn"
					v-clipboard:copy="pwd_c"
					v-clipboard:success="onCopy"
					v-clipboard:error="onError"
				>
					<p>一键复制</p>
				</div>
				<div class="dc-tip">
					<p>点击复制后，打开淘宝购买</p>
					<p>注：若一键复制失败，请长按<span></span>内文字 或 用【浏览器领券】模式</p>
				</div>	
			</div>
		</div>
	</div>
</template>
<script>
	import { videoPlayer } from 'vue-video-player';
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import * as types from '../store/types.js'
	export default{
		components: {
			videoPlayer
		},
		data(){
			return{
				diaShow: false,
				PWD: '',
				pwd_c: '',
				data: JSON.parse(this.$route.params.data),
				time: '',
				list: [],
				conList: [],
				imgList: [],
				url: this.$route.params.url,
				mainurl: this.$route.params.mainurl,
				playerOptions: {
			//        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
			        autoplay: false, //如果true,浏览器准备好时开始回放。
			        muted: false, // 默认情况下将会消除任何音频。
			        loop: false, // 导致视频一结束就重新开始。
			        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
			        language: 'zh-CN',
			        aspectRatio: '1:1', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
			        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
			        sources: [{
			          type: "video/mp4",
			          src: this.$route.params.url//你的视频地址（必填）
			        }],
			        poster: this.$route.params.img, //你的封面地址
			        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
		      	},
		      	playerOptions1: {
			//        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
			        autoplay: false, //如果true,浏览器准备好时开始回放。
			        muted: false, // 默认情况下将会消除任何音频。
			        loop: false, // 导致视频一结束就重新开始。
			        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
			        language: 'zh-CN',
			        aspectRatio: '1:1', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
			        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
			        sources: [{
			          type: "video/mp4",
			          src: this.$route.params.mainurl//你的视频地址（必填）
			        }],
			        poster: this.$route.params.mainimg, //你的封面地址
			        width: document.documentElement.clientWidth,
			        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
		      	}
			}
		},
		computed: {
			player(){
				return this.$refs.videoPlayer.player
			}
		},
		mounted(){
			this.time = types.timeStamp(true, this.data.start_time,),
			this.list = this.data.material_info;
			this.conList = JSON.parse(this.data.material_info.seckill_content);
			this.getData()
		},
		methods: {
			showDia: function(){
				this.diaShow = true;
				var params = new URLSearchParams();
            	params.append('url', this.data.couponurl);
            	params.append('title', this.data.itemshorttitle);
            	axios.post(Http.TAOPWD, params)
            	.then( res => {
            		var ret =res.data;
            		this.PWD = ret.data;
            		var c_price = this.data.itemendprice;
            		this.pwd_c = this.data.itemshorttitle + ("\n") + 
							'【在售价】' + this.data.itemprice + '元' + ("\n") +
							'【优惠券】' + this.data.couponmoney  + '元' + ("\n") +
							'【券后价】' + c_price + '元' + ("\n") +
							'复制这条信息，' + this.PWD + '，打开【手机淘宝】即可领券下单'
            	})
			},
			getData(){
				var self = this;
                self.$jsonp('https://acs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/?data={"itemNumId"%3A"'+this.data.itemid+'"}').then( res => {
                	var ret = res.data;
                    var arr = ret['item']['images'];
                    arr.forEach(function(item){
						self.imgList.push(item);
					})
                })
			},
			share: function(){
				this.$router.push({
					path: '/share/goods/' + this.data.itemid,
					query: {
                        coupon_price: this.data.itemendprice,
		                origin_price: this.data.itemprice,
		                imgList: this.imgList,
		                title: this.data.itemshorttitle,
		                url: this.data.couponurl,
		                type: 1
					}
				})
			},
			onCopy: function (e) {
		        Toast('复制成功')
		    },
		    onError: function (e) {
		        Toast('无法复制文本！')
		    },
			onPlayerPlay: function(){

			},
			onPlayerPause: function(){

			}
		}
	}
</script>
<style lang="scss" scoped>
	.sk-detail{
		.com-header{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
		}
		.skd-content{
			.sc-header{
				padding: 0.4rem 0;
				background: linear-gradient(to bottom, #ec0444 0%, #ec0444 49.9%,#fff 50%, #fff 100%);
				h1{
					margin-bottom: 0.3rem;
					color: #fff;
				}
				.sch-content{
					width: 80%;
					margin-left: 10%;
					border-radius: 0.1rem;
					box-shadow: 0 0.1rem 0.1rem #ffa4a4;
					padding: 0.3rem 0;
					background: #fff;
					.time{
						margin-bottom: 0.2rem;
					}
					.statu{
						margin-bottom: 0.2rem;
						font-size: 0.44rem;
						color: #333;
						font-weight: bold;
						span{
							margin: 0 0.1rem;
							width: 0.34rem;
							height: 0.34rem;
							display: inline-block;
							background: url(../assets/img/iocn_h.png) center center no-repeat;
							background-size: contain;
						}
					}
					.title{
						font-size: 0.20rem;
						color: #666;
					}
				}	
			}
			.skd-video{
				margin: 10%;
				width: 80%;
				margin-bottom: 0;
				.video-player{
					margin-bottom: 0.2rem;
					width: 100%;
				}
			}
			.skd-title{
				margin: 0 0.24rem;
				img{
					width: 100%;
				}
				p{
					margin: 0.2rem 0;
				}
			}
			.skd-photo{
				margin-top: 0.2rem;
				background: #f5f5f5;
				h2{
					height: 0.88rem;
					line-height: 0.88rem;
					font-size: 0.26rem;
				}
				.skdp-item{
					margin: 0.24rem;
					padding: 0.24rem;
					background: #fff;
					img{
						width: 100%;
					}
				}
			}
		}
		.skd-footer{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			width: 92%;
			padding: 0 4%;
			height: 1rem;
			line-height: 1rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(to bottom, #ec0444, #ff0000);
			.skf-left{
				display: flex;
				align-items: flex-end;
				color: rgba(256,256,256,0.6);
				font-size: 0.20rem;
				p{
					margin-right: 0.1rem;
					font-size: 0.36rem;
					font-weight: 700;
					color: #fff;
					span{
						color: rgba(256,256,256,0.6);
						font-size: 0.20rem;
					}
				}
			}
			.skf-btn{
				display: flex;
				p{
					margin-left: 0.10rem;
					padding: 0 0.2rem;
					height: 0.7rem;
					line-height: 0.7rem;
					background: #fff;
					font-size: 0.24rem;
					border-radius: 0.1rem;
				}
			}
		}
		.station{
			width: 100%;
			height: 1rem;
		}
		.dialog{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.2);
			.dia-content{
				position: absolute;
				top: 2rem;
				width: 90%;
				margin-left: 5%;
				border-radius: 0.1rem;
				background: #fff;
				.dc-header{
					width: 100%;
					height: 0.6rem;
					line-height: 0.6rem;
					background: $color;
					color: #fff;
					border-radius: 0.1rem 0.1rem 0 0;
				}
				.dc-text{
					margin: 0.2rem;
					padding: 0.2rem;
					border: 0.02rem dashed $color;
					color: $color;
					background: #fbf4f5;
					text-align: left;
					font-size: 0.24rem;
				}
				.dc-btn{
					margin: 0.1rem 0.2rem;
					height: 0.6rem;
					position: relative;
					p{
						position: absolute;
						top: 0;
						right: 0;
						padding: 0 0.2rem;
						height: 0.44rem;
						line-height: 0.44rem;
						border-radius: 0.44rem;
						background: $color;
						color: #fff;
						font-size: 0.24rem;
					}
				}
				.dc-tip{
					margin: 0.2rem;
					font-size: 0.20rem;
					color: #666;
					text-align:	left;
					span{
						display: inline-block;
						vertical-align: middle;
						width: 0.4rem;
						height: 0.16rem;
						border: 0.01rem dashed $color;
					}
				}
			}
		}
	}
</style>